<!doctype html>
<html lang="zh-CN">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="">
	<meta name="author" content="xuejianxinokok">
	<title>分析函数加分页</title>
	<link rel="stylesheet" href="./resources/css/bootstrap.min.css" />
	<link rel="stylesheet" href="./resources/css/dashboard.css" />
	<meta name="theme-color" content="#7952b3">


	<style>
		.bd-placeholder-img {
			font-size: 1.125rem;
			text-anchor: middle;
			-webkit-user-select: none;
			-moz-user-select: none;
			user-select: none;
		}

		@media (min-width: 768px) {
			.bd-placeholder-img-lg {
				font-size: 3.5rem;
			}
		}

		.b-example-divider {
			height: 3rem;
			background-color: rgba(0, 0, 0, .1);
			border: solid rgba(0, 0, 0, .15);
			border-width: 1px 0;
			box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
		}

		.b-example-vr {
			flex-shrink: 0;
			width: 1.5rem;
			height: 100vh;
		}

		.bi {
			vertical-align: -.125em;
			fill: currentColor;
		}
	</style>



</head>

<body>
	<div id="app">
		<!--参考文档 https://v5.bootcss.com/docs/5.1/getting-started/introduction/-->
		<header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
			<a class="navbar-brand col-md-3 col-lg-2 me-0 px-3" href="#">Company name</a>
			<button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse"
				data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false"
				aria-label="Toggle navigation">
				<span class="navbar-toggler-icon"></span>
			</button>
			<input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
			<div class="navbar-nav">
				<div class="nav-item text-nowrap">
					<a class="nav-link px-3" href="#">Sign out</a>
				</div>
			</div>
		</header>

		<div class="container-fluid">
			<div class="row">




				<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
					<div class="position-sticky pt-3">
						<ul class="nav flex-column">
							<li class="nav-item">
								<a class="nav-link" href="/" target="_self">
									<span data-feather="bar-chart-2"></span>
									demo1
								</a>
							</li>
							<li class="nav-item">
								<a class="nav-link active" aria-current="page" href="#">
									<span data-feather="home"></span>
									demo2
								</a>
							</li>
							

						</ul>
						


					</div>
				</nav>

				<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
				
					<div class="table-responsive">
						<table class="table table-striped table-sm table-hover">
							<thead>
								<tr>
									<th scope="col">行号</th>
									<th scope="col">ID</th>
									<th scope="col">姓名</th>
									<th scope="col">电话</th>
									
									<th scope="col">购买日期</th>
									<th scope="col">购买电话数量</th>
									<th scope="col">最早购买日期</th>
									<th scope="col">用户购买顺序</th>
									<th scope="col">操作</th>
								</tr>
							</thead>
							<tbody>
								<tr v-for="(o,i) in list" :key="o.id">
									<td :class="{'bg-success' : o.isOnline}">
										{{(pageNo-1)*pageSize+i+1}}
									</td>
									<td>{{o.id}}</td>
									<td>{{o.username}}</td>
									<td>{{o.tel}}</td>
									<td>{{o.create_time}}</td>
									<td>{{o.userbuycount}}</td>
									<td>{{o.firstbuytime}}</td>
									<td>{{o.rn}}</td>
									<td>
										<a href="#" class="link-info" @click="showDialogMsg(o.mid)"
											v-if="o.isOnline">消息</a>&nbsp;
										<a href="#" class="link-info" @click="showDialogEdit(o)">编辑</a>&nbsp;
										<a :href="'status.html?mid='+o.mid" class="link-info" target="_blank">详情</a>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
					<!-- "dataAll","dataCur","datanum","dataDatanum" -->
					<Paging :pagesize="pageSize" :datacur="pageNo" :datanum="dataNum" :datadatanum="total"
						@change="pageChange">
					</Paging>

				</main>
			</div>
		</div>

	

		

	</div>
	<script src="./resources/js/http.js"></script>
	<!-- <script src="./resources/js/vue.global.prod.js"></script>-->
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script src="./resources/js/bootstrap.bundle.min.js"></script>
	<script src="./resources/js/feather.min.js"></script>
	<script src="https://unpkg.com/http-vue-loader"></script>

	<script type="module">
		// import Page from './resources/vue/paging.vue'

		/*渲染图标  feather:false */
		(function () {
			'use strict'
			feather.replace({ 'aria-hidden': 'true' })
		})();
		Vue.use(httpVueLoader);
		new Vue({
			el: '#app',
			data: {
					//列表数据
					list:[],
					pageNo:1,
					pageSize:2,
					dataNum:7,
					total:40
			},

			mounted: function () {
				this.queryAllDemo2();

			},
			components: {
				"Paging": "url:./resources/vue/paging.vue"
			},

			methods: {
			
				queryAllDemo2() {
					$http.post('/userTel/queryAllDemo2',{"pageNo":this.pageNo,"pageSize":this.pageSize}).then(res => {
						this.list = res;
						this.total = res?res[0].total:0;//总条数
					})
				},
				pageChange: function (page) {
					this.pageNo = page
					//分页查询
					this.queryAllDemo2();
				}
			}
		});
	</script>
</body>

</html>
</body>

</html>